@layout SettingsLayout
@page "/admin/settings/users/"
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer
@inject IToaster _toaster

<PageTitle Title="@_localizer["users-settings"]" />

@if (!showForm)
{
    <h1 class="section-title">@_localizer["users-settings"]</h1>
    <div class="section-content">
        <div class="list-toolbar">
            <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select-all"]">
                <input type="checkbox" class="list-check-input form-check-input">
            </label>
            <button class="btn btn-blogifier btn-rounded -add me-3" type="button" @onclick="(()=> LoadForm(string.Empty))" @onclick:preventDefault>
                @_localizer["new-user"]
            </button>
            <div class="dropdown dropdown-flush">
                <button class="btn btn-link dropdown-toggle" type="button" id="dropdownUsersAction" data-bs-toggle="dropdown" aria-expanded="false">
                    @_localizer["actions"]
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownUsersAction">
                <button type="button" class="dropdown-item text-blogifier" @onclick="(()=> SetAsAdmin(true))">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="15" fill="currentColor" class="bi bi-shield-fill-check" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647z" />
                    </svg>
                    <span>@_localizer["admin"]</span>
                </button>
                <button type="button" class="dropdown-item text-secondary" @onclick="(()=> SetAsAdmin(false))">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="18" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
                        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                    </svg>
                    <span>@_localizer["user"]</span>
                </button>
                <button type="button" class="dropdown-item text-danger" @onclick="(()=> RemoveSelected())">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg>
                    <span>@_localizer["remove"]</span>
                </button>
            </div>
        </div>
    </div>

      @if (AuthorItems != null)
      {
         <ul class="list">
            @foreach (var item in AuthorItems)
            {
               <li class="list-item">
                  <label class="list-check form-check" data-bs-toggle="tooltip" title="@_localizer["select"]">
                     <input type="checkbox" class="list-check-input form-check-input" @bind="item.Selected">
                  </label>
                  <a class="list-title -link" href="#" @onclick="(()=> LoadForm(item.Author.Email))" @onclick:preventDefault>@item.Author.DisplayName</a>
                  <span class="list-text ms-auto">@item.Author.Email</span>
                  @if (item.Author.IsAdmin)
                  {
                      <span class="list-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" fill="currentColor" class="bi bi-shield-fill-check text-blogifier" viewBox="0 0 16 16" data-bs-toggle="tooltip" title="@_localizer["admin"]">
                           <path fill-rule="evenodd" d="M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647z" />
                        </svg>
                     </span>
                  }
                  else
                  {
                      <span class="list-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="currentColor" class="bi bi-person-fill text-secondary" viewBox="0 0 16 16"  data-bs-toggle="tooltip" title="@_localizer["user"]">
                            <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
                        </svg>
                     </span>
                  }
               </li>
            }
         </ul>
      }
      else
      {
         <div>@_localizer["list-is-empty"]</div>
      }
   </div>
}
@if (showForm && SelectedAuthor != null)
{
   <h1 class="section-title">@_localizer["add-user"]</h1>
   <div class="section-content -half">
        <EditForm Model="@SelectedAuthor" OnValidSubmit="Save">
            <DataAnnotationsValidator />
            <div class="form-item">
                <label class="form-label">@_localizer["email"]</label>
                <input class="form-control" type="email" @bind="SelectedAuthor.Email" />
                <ValidationMessage For="@(() => SelectedAuthor.Email)"></ValidationMessage>
            </div>
            <div class="form-item">
                <label class="form-label">@_localizer["name"]</label>
                <input class="form-control" tyoe="text" @bind="SelectedAuthor.DisplayName" />
                <ValidationMessage For="@(() => SelectedAuthor.DisplayName)"></ValidationMessage>
            </div>
            <div class="form-item">
                <label class="form-label">@_localizer["password"]</label>
                <input class="form-control" type="password" @bind="SelectedAuthor.Password" />
                <ValidationMessage For="@(() => SelectedAuthor.Password)"></ValidationMessage>
            </div>
            <div class="form-item">
                <label class="form-label">@_localizer["user-bio"]</label>
                <textarea class="form-control" rows="3" @bind="SelectedAuthor.Bio" />
            </div>
            <div class="form-item">
                <button type="submit" class="btn btn-blogifier px-5 me-3">@_localizer["save"]</button>
                <button type="button" @onclick="Cancel" class="btn btn-default px-4">@_localizer["cancel"]</button>
            </div>
        </EditForm>
   </div>
}
<ToasterComponent @ref="Toaster" />

@code {
   protected List<Author> Authors { get; set; }
   protected List<AuthorItem> AuthorItems { get; set; }
   protected Author SelectedAuthor { get; set; }
   protected bool showForm = false;
   protected ToasterComponent Toaster;

   protected override async Task OnInitializedAsync()
   {
       await Load();
   }

   protected async Task Load()
   {
       Authors = await _http.GetFromJsonAsync<List<Author>>("api/author/all");

       AuthorItems = new List<AuthorItem>();
       foreach (var author in Authors)
       {
           AuthorItems.Add(new AuthorItem { Selected = false, Author = author });
       }
       SelectedAuthor = BlankAuthor();
       showForm = false;
   }

   protected async Task RemoveSelected()
   {
       foreach (var item in AuthorItems)
       {
           if (item.Selected)
               await Remove(item.Author.Id);
       }
   }

   protected async Task Remove(int id)
   {
       Toaster.Toast(await _http.DeleteAsync($"api/author/{id}"));
       await Load();
   }

   protected async Task SetAsAdmin(bool isAdmin)
   {
       foreach (var item in AuthorItems)
       {
           if (item.Selected)
           {
               item.Author.IsAdmin = isAdmin;
               await _http.PutAsJsonAsync<Author>("api/author/update", item.Author);
           }
       }
       await Load();
   }

   protected async Task Save()
   {
       if (SelectedAuthor.Id == 0)
           Toaster.Toast(await _http.PostAsJsonAsync<Author>("api/author/add", SelectedAuthor));
       else
           Toaster.Toast(await _http.PutAsJsonAsync<Author>("api/author/update", SelectedAuthor));
       await Load();
   }

   protected async Task LoadForm(string email)
   {
       if (string.IsNullOrEmpty(email))
           SelectedAuthor = BlankAuthor();
       else
           SelectedAuthor = await _http.GetFromJsonAsync<Author>($"api/author/email/{email}");
       showForm = true;
   }

   protected void Cancel()
   {
       SelectedAuthor = BlankAuthor();
       showForm = false;
   }

   protected Author BlankAuthor()
   {
       return new Author
       {
           DisplayName = "",
           Email = "",
           Password = ""
       };
   }
}
